<template>
  <button class="notice-item" @click="handleToDetail">
    <view class="wk-list-item">
      <view class="notice-title">
        {{ itemData.title }}
      </view>
      <view class="notice-time">
        {{ itemData.createTime }}
      </view>
      <view class="notice-details">
        {{ itemData.content }}
      </view>
    </view>
  </button>
</template>

<script>
  export default {
    name: 'NoticeItem',
    props: {
      itemData: {
        type: Object,
        required: true,
      }
    },
    methods: {
      handleToDetail() {
        this.$Router.navigateTo({
          url: '/pages_oa/notice/detail',
          query: {
            id: this.itemData.announcementId
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .notice-item {
		.wk-list-item {
			text-align: left;
			flex-direction: column;
			padding: 20rpx 32rpx;
			@include left;
		}

    .notice-title {
      width: 100%;
      color: $dark;
      font-size: 32rpx;
      @include ellipsis;
    }

    .notice-time {
			width: 100%;
			line-height: 1.2;
      font-size: 24rpx;
      color: $light;
      margin: 10rpx 0;
    }

    .notice-details {
			width: 100%;
      font-size: 26rpx;
      color: $gray;
      @include ellipsis;
    }
  }
</style>
